<template>
    <div id="login">
        <div class="container">
            <div class="logo">
                <img :src="webInfo.logo" alt="logo">
            </div>
            <div class="form">
                <div class="title">
                    <div class="txt">
                        用户注册
                    </div>
                </div>
                <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="FormData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="name">
                        <el-input type="number" v-model="FormData.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="FormData.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="FormData.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="danger" round style="width:100%;" @click="submitForm">立即注册</el-button>
                        <!-- <el-button @click="resetForm">重置</el-button> -->
                    </el-form-item>
                </el-form>
                <div class="tips">
                    已有账户?去<span class="register" @click="login">登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                width: "",
                height: "",
                webInfo: {},
                FormData: {
                   
                }
            }
        },
        mounted() {
            this.getSize()
            this.getWebInfo()
        },
        methods: {
            getSize() {
                let dom = document.getElementById("login")
                let data = document.documentElement.clientHeight
                console.log(data);
                dom.style.height = `${data}px`
            },
            // 提交表单
            async submitForm() {
                let { name, phone, password, checkPass } = this.FormData
                if (!name) {
                    this.$message.error("请输入姓名")
                    return  false
                } else if (!phone) {
                    this.$message.error("请输入手机号码")
                    return  false
                } else if (!password) {
                    this.$message.error("请输入密码")
                    return  false
                } else if (!checkPass) {
                    this.$message.error("请再次输入密码")
                    return  false
                } else if (password != checkPass) {
                    this.$message.error("两次输入的密码不一致,请重新输入")
                    this.FormData.checkPass = ""
                    return  false
                } else {
                    let res = await this.$axios.post("/port/index/register", {name,phone,password})
                    console.log(res);
                    if (res.data.code == 202 || res.data.code == 204) {
                        this.$message.success("注册成功")
                        this.$router.push("/login")
                    } else {
                        this.$message.success("注册失败,请重试")
                        // this.$router.push("/login")
                    }
                     
                }
            },
            // 重置表单
            resetForm() {

            },
            login() {
                this.$router.push("/login")
            },
            // 网页信息
            async getWebInfo() {
                let res = await this.$axios.post("/port/index/website", { key: this.$key })
                console.log(res);
                if (res.data.code == 200) {
                    this.webInfo = res.data.data[0]
                }
                let keywords = document.querySelector("meta[name=keywords]")
                let desc = document.querySelector("meta[name=description]")
                let title = document.querySelector("title")
                // console.log(keywords);
                keywords.content = this.webInfo.keyword
                desc.content = this.webInfo.describe
                title.innerText = this.webInfo.title
            },
        }
    }
</script>

<style lang="scss" scoped>
#login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url("../assets/image/bg.jpg") center center no-repeat;
    background-size: 100% 100%;
    padding-top: 10%;
    .container {
        width: 1200px;
        // height: 600px;
        padding: 40px;
        box-sizing: border-box;
       
        border-radius: 30px;
        box-shadow: 0 0 12px #007eff;
        margin: 0 auto;
        background-color: #fff;
        display: flex;
        align-items: center;
        .logo {
            width: 520px;
            padding: 20px;
            box-sizing: border-box;
            img {
                width: 100%;
            }
        }
        .form {
            flex: 1;
            border-left: 1px solid #007eff;
            box-sizing: border-box;
            padding: 30px 60px;
             .title {
                 width: 100%;
                 box-sizing: border-box;
                 padding: 10px 30px;
                 text-align: center;
                 font-size: 30px;
                 
                 color: #007eff;
                 font-weight: bold;
                 .txt {
                    //  border-bottom: 1px solid #007eff;
                     width: 200px;
                     margin: 0 auto;
                     height: 70px;
                     line-height: 70px; 
                 }
             }
             .tips {
                 font-size: 14px;
                 width: 100%;
                 text-align: right;
                 .register {
                     color: #007eff;
                     cursor: pointer;
                 }
             }
        }
    }
}
</style>